<template>
  <div id="user">
    <a-layout-header>
      <a-form layout="inline" :form="form" class="search_top">
        <a-form-item>
          <img
            class="table_search"
            src="../../assets/image/icon/table_search.png"
            alt=""
          />
          <span>筛选</span>
        </a-form-item>
        <a-form-item>
          <a-input
            placeholder="输入店铺名称/企业名称/手机号"
            v-model="pagination.userName"
            @keyup.enter="getUserList('status')"
          ></a-input>
        </a-form-item>
        <!-- <a-form-item>
          <a-input placeholder="手机号" v-model="pagination.phone" @keyup.enter="getUserList('status')"></a-input>
        </a-form-item> -->
        <a-form-item>
          <a-select
            style="width: 160px"
            placeholder="请选择状态"
            :allowClear="true"
            showSearch
            :filterOption="filterOption"
            @change="roleSearchChange"
            v-decorator="['role']"
            class="selectWidth"
          >
            <a-select-option
              v-for="item of rolesList"
              :key="item"
              :value="item"
              >{{ item }}</a-select-option
            >
          </a-select>
          
        </a-form-item>
           <a-form-item>
          <a-range-picker
            @change="getTimeChange"
            :showTime="{
              hideDisabledOptions: true,
              defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
            }"
            v-decorator="[
              'dateTime'
            ]"
            :format="format"
            class="min-label"
          />
        </a-form-item>
        <a-form-item class="fright">
          <a-button
            class="search_btn"
            icon="search"
            @click="getUserList('status')"
            >搜索</a-button
          >
        </a-form-item>
        <a-form-item class="fright">
          <a-button class="search_btn" icon="sync" @click="initPage"
            >重置</a-button
          >
        </a-form-item>
        <!-- <a-form-item class="fright">
          <a-button
            class="abutton"
            type="primary"
            icon="plus"
            @click="addbusiness"
            >添加店铺</a-button
          >
          <a-button class="abutton" type="primary" icon="tool"
            >重置密码</a-button
          >
          <a-button class="abutton" type="primary" icon="swap"
            >批量启用</a-button
          >
          <a-button class="abutton" type="primary" icon="close"
            >批量关闭</a-button
          >
        </a-form-item> -->
      </a-form>
      <a-form layout="inline" class="search_top">
        <a-form-item>
          <img
            class="table_search"
            src="../../assets/image/icon/table_list.png"
            alt=""
          />
          <span>账号列表</span>
        </a-form-item>
        <a-form-item class="fright">
          <a-button type="primary" icon="plus" @click="addbusiness">添加店铺</a-button>
              <a-button class="abutton" type="primary" icon="tool"
            >重置密码</a-button
          >
          <a-button class="abutton" type="primary" icon="swap"
            >批量启用</a-button
          >
          <a-button class="abutton" type="primary" icon="close"
            >批量关闭</a-button
          >
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <a-table
        width="800px"
        :row-selection="rowSelection"
        :columns="columns"
        :dataSource="dataTable"
        :rowKey="(record) => record.createTime"
        :loading="loading"
        :pagination="false"
        bordered>
        <template slot="roles" slot-scope="text, record">
          <a-tag color="rgb(135, 208, 104)">{{ record.role.name }}</a-tag>
        </template>
        <template slot="username" slot-scope="text, record">
          <a-popover placement="topLeft">
            <template slot="content">
              <p>{{ record.username }}</p>
            </template>
            <p class="ellipsi">
              {{ record.username }}
            </p>
          </a-popover>
        </template>
        <template slot="action" slot-scope="text, record">
          <!-- <a-tag color="#933dfe" v-permission:role="['userUpdate']" @click="editUser(record)">编辑</a-tag> -->
          <a-tag color="#933dfe" @click="addbusinessInfo(record.id)"
            >通过</a-tag
          >
          <!-- <a-tag color="#933dfe" @click="editUser(record)">编辑</a-tag> -->
          <a-tag color="#f50" @click="deleteUser(record)">驳回</a-tag>
        </template>
      </a-table>
    </a-layout-content>
    <a-layout-footer>
      <a-pagination
        :pageSizeOptions="pageSizeOptions"
        :total="totalPage"
        :showTotal="(total) => `总共${total}条`"
        :current="pagination.pageNumber"
        showSizeChanger
        showQuickJumper
        @change="paginationChange"
        @showSizeChange="onShowSizeChange"
      ></a-pagination>
    </a-layout-footer>
    <modalWin
      :visible="visible"
      :confirmLoading="confirmLoading"
      :title="title"
      :userId="userId"
      :rolesList="rolesList"
      @addAction="addAction"
      @addCancel="addCancel"
    ></modalWin>

    <!-- 编辑弹窗 -->
    <a-modal
      width="800px"
      title="编辑公告内容"
      :visible="editDialogShow"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <editor></editor>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";


import * as API from "../../api/business";
import modalWin from "./commponent/editUser.vue";

import editor from "../../commonComponents/editor/editor.vue";
export default {
  name: "user",
  components: {
    modalWin,
    editor,
  },
  data() {
    return {
      format: "YYYY-MM-DD HH:mm:ss",


      ModalText: "Content of the modal",
      // confirmLoading: false,
      editDialogShow: false,
      form: this.$form.createForm(this),
      pageSizeOptions: ["10", "20", "50"],
      totalPage: undefined,
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        // blurry: '',
        userName: "",
        phone: null,
        roleId: null,
      },
      rolesList: ['通过',"驳回"],
      visible: false,
      confirmLoading: false,
      title: "新增",
      userId: null,
      loading: false,
      columns: [
        {
          title: "店铺名称",
          dataIndex: "merchantName",
          align: "center",
          scopedSlots: { customRender: "merchantName" },
        },
        {
          title: "店铺类型",
          dataIndex: "merchantType",
          align: "center",
          scopedSlots: { customRender: "merchantType" },
        },
        {
          title: "商家用户名",
          dataIndex: "merchantContact",
          align: "center",
          scopedSlots: { customRender: "merchantContact" },
        },
        {
          title: "联系电话",
          dataIndex: "companyName",
          align: "center",
          scopedSlots: { customRender: "companyName" },
        },
        {
          title: "申请时间",
          dataIndex: "sale",
          align: "center",
          scopedSlots: { customRender: "sale" },
        },
         {
          title: "资质图片",
          dataIndex: "saless",
          align: "center",
          scopedSlots: { customRender: "sale" },
        },
        {
          title: "审核状态",
          dataIndex: "contactPhone",
          align: "center",
          scopedSlots: { customRender: "contactPhone" },
        },
        // {
        //   title: "创建时间",
        //   dataIndex: "createTime",
        //   width: "14%",
        //   align: "center",
        //   scopedSlots: { customRender: "createTime" }
        // },
        // {
        //   title: "所属角色",
        //   dataIndex: "roles",
        //   width: "6%",
        //   align: "center",
        //   scopedSlots: { customRender: "roles" }
        // },
        {
          title: "操作",
          dataIndex: "action",
          width: "200px",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      dataTable: [],
    };
  },
  mounted() {
    this.getUserList();
    // this.getRolesList();
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  activated() {},
  methods: {
     moment,
    //时间选择器
       getTimeChange(dates, dateStrings) {
         console.log(dates , dateStrings,"------------------")
      if (dates.length < 1) {
        this.pagination.createTime = null;
      } else {
        this.pagination.createTime = dateStrings.join(",")
      }
    },
    addbusiness() {
      this.$router.push({
        path: "/business/addbusiness",
      });
    },
    addbusinessInfo(id) {
      console.log(id);
      this.$router.push({
        path: "/business/addbusiness",
        query: {
          id: id,
          key: Date.now(),
        },
      });
    },
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.editDialogShow = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.editDialogShow = false;
    },
    editDialog() {
      this.editDialogShow = true;
    },

    getUserList(status) {
      // let userId = this.userInfo.roles[0].id
      if (status === "status") {
        this.pagination.pageNumber = 1;
      }
      this.loading = true;
      API.merchantPage(this.pagination).then((res) => {
        if (res.code === 200) {
          this.dataTable = res.data.records;
          this.totalPage = res.data.total;
        }
        this.loading = false;
      });
    },
    // getRolesList() {
    //   let postBody = { pageSize: 1000, pageNumber: 1 };
    //   API.getRoles(postBody).then((res) => {
    //     if (res.code === 200) {
    //       this.rolesList = res.data.records;
    //       // console.log(this.rolesList)
    //     }
    //   });
    // },
    roleSearchChange(value) {
      this.pagination.roleId = value;
      this.getUserList("status");
    },
    onShowSizeChange(value, pageSize) {
      this.pagination.pageNumber = 1;
      this.pagination.pageSize = pageSize;
      this.getUserList();
    },
    paginationChange(value) {
      this.pagination.pageNumber = value;
      this.getUserList();
    },
    initPage() {
      this.pagination.pageNumber = 1;
      this.pagination.pageSize = 10;
      this.pagination.userName = "";
      this.pagination.phone = null;
      this.pagination.roleId = undefined;
      this.form.setFieldsValue({
        role: undefined,
      });
      this.getUserList();
    },
    editUser(record) {
      this.title = "编辑";
      this.visible = true;
      this.userId = record.id;
    },
    deleteUser(record) {
      let that = this;
      this.$confirm({
        okText: "确定",
        cancelText: "取消",
        title: "",
        content: "确定进行删除操作？",
        onOk() {
          let arr = [];
          arr.push(record.id);
          API.delUser(arr).then((res) => {
            if (res.code === 200) {
              that.$message.destroy();
              that.$message.success("删除成功");
              that.getUserList();
            }
          });
        },
        onCancel() {},
      });
    },
    // addUser() {
    //   this.initUserEdit();
    //   this.visible = true;
    //   this.userId = null
    // },
    initUserEdit() {
      this.title = "新增";
      this.userId = undefined;
    },
    addAction(postUserData) {
      this.confirmLoading = true;
      this.userId
        ? this.editUserSubmit(postUserData)
        : this.addUserSubmit(postUserData);
    },
    addUserSubmit(postUserData) {
      API.addUser(postUserData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.destroy();
            this.$message.success("用户添加成功");
            this.initUserEdit();
            this.getUserList();
            this.visible = false;
          }
          this.confirmLoading = false;
        })
        .catch(() => {
          this.confirmLoading = false;
        });
    },
    editUserSubmit(postUserData) {
      API.editUser(this.userId, postUserData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.destroy();
            this.$message.success("用户修改成功");
            this.initUserEdit();
            this.getUserList();
          }
          this.confirmLoading = false;
          this.visible = false;
        })
        .catch(() => {
          this.confirmLoading = false;
          this.visible = false;
        });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    addCancel() {
      this.visible = false;
      this.userId = undefined;
    },
    toBindMenu() {
      this.$router.push({
        path: "/configGroup",
        key: new Date(),
      });
    },
  },
};
</script>

<style lang="less" scoped>
.selectWidth {
  width: 140px;
}
.abutton {
  margin: 0 10px;
}
</style>